<!DOCTYPE html>
<html lang="en" style="text-align: center">
<head>
    <meta charset="UTF-8">
    <title>Analysis report2</title>
    <style>
        @import url("//unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css");

        body {
            margin: 0 auto;
        }

        div {
            /*border: 1px solid black;*/
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: white;
        }

        #download {
            margin:auto;
        }

        #logo {
            float: left;
        }

        #logo:hover {
            opacity: 0.6;
            transition: 0.5s all linear;
        }

        #head:after {
            content: '';
            display: block;
            clear: both;
        }

        #contain {
            margin: 0 auto;
            width: 95%;
            height: 60%;
            margin-top: 30px;
            padding: 2%;
            text-align: center;
        }

        #win {
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 700px;
            height: 700px;
            border-radius: 30px;
            background-color: #fff;
            opacity: 1;
            z-index: 3;
        }

        #win:hover {
            transform: scale(1.1);
            transition: 1s all linear;
        }

        #user-message {
            width: 95%;
            height: 10%;
            margin: 0 auto;
            margin-top: 2%;
            padding: 2%;
            text-align: left;
        }

        #user-message div {
            display: inline-block;
            width: 48%;
            height: 96%;
        }

        i {
            margin-left: 7%;
            margin-top: 3%;
        }

        #tan {
            left: 0;
            top: 0;
            background-color: grey;
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.5;
        }

        #container, #pieContainer, .highcharts-description, .highcharts-description {
            display: inline-block;
            /*border: 1px solid blue;*/
        }

        #container, #pieContainer {
            width: 55%;
            height: 98%;
        }

        .highcharts-description {
            width: 43%;
            height: 98%;
            padding-left: 1%;
        }

        .highcharts-figure {
            padding: 2%;
        }

        @media print {
            @page {
                size: A4 portrait;
            }
        }

        footer {
            /*border: 1px solid black;*/
            margin: 0 auto;
            height: 12%;
            width: 100%;
            padding-top: 16px;
            background-color: #ABD16F;
            color: #fff;
        }
    </style>
</head>
<body style="width:260mm;height: 370mm;">
<header style="border-bottom: #70AD47 1px solid; height: 100px;text-align: center;">
    <div style="width: 90%;margin: 0 auto" id="head">
        <a href="https://albatel.ie/"><img width="200" height="90" id="logo"
                                           src="https://albatel.ie/wp-content/uploads/2021/03/new-logo.jpg"
                                           alt="https://albatel.ie/"
                                           style="margin-left: 30px;"></a>
        <li style="font-size: 40px;color: black; list-style:none; font-family: Arial; padding-top: 40px;">
            Questionnaire Analysis Report
        </li>
    </div>
</header>

<div id="user-message">
    <div>
        <i class="el-icon-office-building" id="companyname"> Company name: </i><br>
        <i class="el-icon-house" id="businesssector"> Business Sector: </i><br>
        <i class="el-icon-user" id="employeenum"> Number of employees: </i><br>
        <i class="el-icon-location-outline" id="companylocation"> Company Location: </i><br>
    </div>
    <div>
        <i class="el-icon-s-custom" id="contactname"> Contact Name: </i><br>
        <i class="el-icon-s-opportunity" id="contactjobtitle"> Contact Job Title: </i><br>
        <i class="el-icon-message-solid" id="contactemail"> Contact Email: </i><br>
        <i class="el-icon-phone" id="contacttelephone"> Contact Telephone: </i><br>
    </div>
</div>
<div id="contain">

    <!--___________________________柱状图👇____________________________________________-->


    <div class="highcharts-figure" style="height:46%;width:96%;">

        <!--        柱状图-->
        <div id="container"></div>

        <!--        柱状图描述文字-->
        <div class="highcharts-description" id="righttext" style="float: right">
        </div>
    </div>

    <!--___________________________饼图👇____________________________________________-->

    <div class="highcharts-figure" style="height:46%;width:96%;">

        <!--        饼图-->
        <div id="pieContainer"></div>

        <!--        饼图描述文字-->
        <div class="highcharts-description" id="righttext2" style="float: right">
        </div>
    </div>
</div>
<div id="download" style="position: fixed; right: 30px;bottom: 50px;width: 100px;height: 20px;">
    <el-button type="success" plain onclick="download()">Download</el-button>
</div>
<footer>
    <div><span style="font-size: large; font-weight: bold;">If you have any suggestions or feedback about our questionnaire, please contact us</span>
    </div>
    <div style="height: 80%;">
        <div style="display: inline-block; width: 45%; height: 100%; text-align: left; float: left">
            <ul>
                <li style="font-size: larger"><a href="https://albatel.ie/contact-us/" target="_blank">Contact us</a>
                </li>
                <li><i class="el-icon-phone"> Phone: <a href="tel:016102688">01 6102688</a></i></li>
                <li><i class="el-icon-message"> Email: <a href="mailto:jobs@albatel.ie">info@albatel.ie</a></i></li>
            </ul>
        </div>
        <div style="display: inline-block; width: 45%; height: 100%; text-align: left; float: right">
            <ul>
                <li style="font-size: larger">Follow us</li>
                <li><i class="el-icon-right"></i> FaceBook: <a href="https://www.facebook.com/AlbatelLtd">AlbatelLtd</a>
                </li>
                <li><i class="el-icon-right"></i> Instagram: <a href="https://www.instagram.com/albatel_ireland/">albatel_ireland</a>
                </li>
                <li><i class="el-icon-right"></i> LinkedIn: <a href="https://www.linkedin.com/company/albatel-ltd/">albatel-ltd</a>
                </li>
            </ul>
        </div>
    </div>
</footer>
</body>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.1/lib/index.js"></script>
<script>new Vue().$mount('#download')</script>
<script>var Main = {
    data() {
        return {
            value1: null,
            value2: null,
            colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
        }
    }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#evaluate')</script>
<script>
    function download() {
        document.getElementById("download").style.display = "none";
        window.print();
        document.getElementById("download").style.display = "block";
    }
</script>

<script>
    var q1, q2, q3, q4, q5, q6, q7, q8, q9, q10, q11, q12, q13, total = 0, red = 0, amber = 0, green = 0;
</script>
<script src="../js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        $.ajax({
            url: "http://localhost:8080/CS335Lab/Servlet2",
            type: "get",
            data: {},
            dataType: "json",
            error: function () {
                console.log("ajax请求数据失败！");
            },
            success: function (data) {
                //浏览器把接受到的json数据作为js对象，可通过.调用属性data
                $("#companyname").append(data["companyname"]);
                $("#businesssector").append(data["businesssector"]);
                $("#employeenum").append(data["employeenum"]);
                $("#companylocation").append(data["companylocation"]);
                $("#contactjobtitle").append(data["contactjobtitle"]);
                $("#contactemail").append(data["contactemail"]);
                $("#contacttelephone").append(data["contacttelephone"]);
                $("#contactname").append(data["contactname"]);


                q1 = data["Legal Compliance"];
                q2 = data["Hours of Work and Leave"];
                q3 = data["Policies & Practices"];
                q4 = data["Employee Relations"];
                q5 = data["Performance Management"];
                q6 = data["Training and Development"];
                q7 = data["Recruitment & Retention"];
                q8 = data["Change and Reorganisation"];
                q9 = data["Pay and Benefits"];
                q10 = data["Employee Communication & Engagement"];
                q11 = data["Health and Safety"];
                q12 = data["Covid Related"];
                q13 = data["Employee Records and GDPR"];
                var markArr = new Array(q1, q2, q3, q4, q5, q6, q7, q8, q9, q10, q11, q12, q13);
                for (var i = 0; i < 13; i++) {
                    if (markArr[i] == 1) {
                        red++;
                        total++;
                    } else if (markArr[i] == 2) {
                        amber++;
                        total += 2;
                    } else if (markArr[i] == 3) {
                        green++
                        total += 3;
                    }
                }
                // ——————————————————————
                var text1, text2, text3, text4;
                if (total >= 31) {
                    text1 = $("<p style='font-size:20px;color: #7dff49;margin-top: 0%'></p>").text("According to your answers, your overall rating is green")
                } else if (total >= 23.4) {
                    text1 = $("<p style='font-size:20px;color: rgb(221,156,0)'></p>").text("According to your answers, your overall rating is Amber")
                } else {
                    text1 = $("<p style='font-size:20px;color: red'></p>").text("According to your answers, your overall rating is Red")
                }
                text2 = $("<p style='color: black;text-align: left'></p>").text("In order to improve your company's situation, the following areas are rated relatively low, please keep an eye out for them in the future")
                text3 = $("<ul id='redid' style='text-align:left;font-size: 10px;font-weight: bold'></ul>").text("");
                $("#righttext").append(text1, text2, text3);
                if (q1 == 1) {
                    text4 = $("<li></li>").append("Legal Compliance");
                    $("#redid").append(text4)
                }
                if (q2 == 1) {
                    text4 = $("<li></li>").append("Hours of Work and Leave");
                    $("#redid").append(text4)
                }
                if (q3 == 1) {
                    text4 = $("<li></li>").append("Policies & Practices");
                    $("#redid").append(text4)
                }
                if (q4 == 1) {
                    text4 = $("<li></li>").append("Employee Relations");
                    $("#redid").append(text4)
                }
                if (q5 == 1) {
                    text4 = $("<li></li>").append("Performance Management");
                    $("#redid").append(text4)
                }
                if (q6 == 1) {
                    text4 = $("<li></li>").append("Training and Development");
                    $("#redid").append(text4)
                }
                if (q7 == 1) {
                    text4 = $("<li></li>").append("Recruitment & Retention");
                    $("#redid").append(text4)
                }
                if (q8 == 1) {
                    text4 = $("<li></li>").append("Change and Reorganisation");
                    $("#redid").append(text4)
                }
                if (q9 == 1) {
                    text4 = $("<li></li>").append("Pay and Benefits");
                    $("#redid").append(text4)
                }
                if (q10 == 1) {
                    text4 = $("<li></li>").append("Employee Communication & Engagement");
                    $("#redid").append(text4)
                }
                if (q11 == 1) {
                    text4 = $("<li></li>").append("Health and Safety");
                    $("#redid").append(text4)
                }
                if (q12 == 1) {
                    text4 = $("<li></li>").append("Covid Related");
                    $("#redid").append(text4)
                }
                if (q13 == 1) {
                    text4 = $("<li></li>").append("Employee Records and GDPR");
                    $("#redid").append(text4)
                }

                var text11;
                text11 = $("<br>").text("");
                $("#righttext2").append(text11);
                text11 = $("<h2 style='text-align: center'></h2>").text("Proportion of each color");
                $("#righttext2").append(text11);

                text11 = $("<p style='text-align: left;color:#7dff49'></p>").text("Green: " + green / 13);
                $("#righttext2").append(text11);

                text11 = $("<p style='text-align:left;color:rgb(221,156,0)'></p>").text("Amber: " + amber / 13);
                $("#righttext2").append(text11);
                text11 = $("<p style='text-align: left;color: red'></p>").text("Red: " + red / 13);
                $("#righttext2").append(text11);
                text11 = $("<br>").text("Proportion of each color");
                $("#righttext2").append(text11);
                text11 = $("<p style='color: grey;text-align: left'></p>").text("You can click on the corresponding color on the image to see the details");
                $("#righttext2").append(text11);
                //——————————————————————————————


                console.log(data);


                Highcharts.chart('container', {
                    chart: {
                        type: 'bar'
                    },
                    title: {
                        text: 'Statistical results of your questionnaire'
                    },
                    subtitle: {
                        text: 'Green:3  Amber:2  Red:1'
                    },
                    xAxis: {
                        categories: ['Legal Compliance', 'Hours of Work and Leave', 'Policies & Practices', 'Employee Relations',
                            'Performance Management', 'Training and Development', 'Recruitment & Retention', 'Change and Reorganisation', 'Pay and Benefits',
                            'Employee Communication & Engagement', 'Health and Safety', 'Covid Related', 'Employee Records and GDPR'],
                        title: {
                            text: null
                        }
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Tips: The upper right button has more functionality',
                            align: 'high'
                        },
                        labels: {
                            overflow: 'justify'
                        }
                    },
                    tooltip: {
                        valueSuffix: ' marks'
                    },
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true
                            }
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -40,
                        y: 80,
                        floating: true,
                        borderWidth: 1,
                        backgroundColor:
                            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
                        shadow: true
                    },
                    credits: {
                        enabled: false
                    },
                    series: [{
                        name: 'Average Mark',
                        data: [q1, q2, q3, q4, q5, q6, q7, q8, q9, q10, q11, q12, q13]
                    }]
                });


                Highcharts.chart('pieContainer', {
                    chart: {
                        type: 'pie',
                        options3d: {
                            enabled: true,
                            alpha: 45,
                            beta: 0
                        }
                    },
                    title: {
                        text: 'The proportion of Red, Amber, Green'
                    },
                    accessibility: {
                        point: {
                            valueSuffix: '%'
                        }
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            depth: 35,
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}'
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'proportion ',
                        data: [
                            ['Red', red / 13],
                            ['Amber', amber / 13],
                            {
                                name: 'Green',
                                y: green / 13,
                                sliced: true,
                                selected: true
                            }
                        ]
                    }]
                });
            }
        })


    });
</script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<!--<script>window.print();</script>-->

</html>